<template>
  <div class="pagination">
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <div class="goto" @keydown.enter="goTo">
      跳至
      <input
        type="text"
        autoccomplete="off"
        min="1"
        max="20"
        v-model.number="val2"
      />
      页
    </div>
  </div>
</template>

<script>
export default {
  props: ["total", "pageSize"],
  data() {
    return {
      currentPage: 1,
      val2: "",
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$parent.page = val;
      this.currentPage = val;
      this.$parent.getData();
    },
    goTo() {
      console.log(this.val2);
      this.handleCurrentChange(this.val2);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  height: 76px;
  display: flex;
  justify-content: center;

  .el-pagination {
    .el-pager {
      li {
        margin: 0 5px;
      }
    }
  }

  .goto {
    margin-left: 2px;
    line-height: 32px;
    color: #333;
    font-size: 12px;

    input {
      width: 26px;
      height: 16px;
      line-height: 28px;
      text-align: center;
      border: 1px solid #bbb;
      border-radius: 3px;
      margin: 0 2px;
    }
  }
}
</style>